<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <title>分页标签</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <style type="text/css">
        .pagination a {
            width: 54px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="widget-content">
    <div>
        <ul class="pagination" total="999"></ul>
    </div>
</div>
</body>
<script type="text/javascript">
    var rem = window.location.pathname;
    next(localStorage[rem] ? localStorage[rem] : 1);

    function next(index) {
        var pagination = document.getElementsByClassName('pagination')[0];

        var total = parseInt(pagination.getAttribute('total'));
        if (total == 0)
            return;
        localStorage[rem] = index;

        var size = total < 10 ? total : 10;

        var left = total < 10 ? 1 : index - Math.ceil(size / 2 - 1);
        left = left > 1 ? left : 1;

        var right = left - 1 + size;
        right = right < total ? right : total;

        var isFirst = index == 1;
        var isLast = index == total;

        var htm = '';
        htm += build(1, "首页", isFirst);
        htm += build(index - 1, "«", isFirst);

        for (var i = left; i <= right; i++)
            htm += build(i, i, null, i == index ? "active" : "");

        htm += build(index + 1, "»", isLast);
        htm += build(total, "末页", isLast);

        pagination.innerHTML = htm;
    }

    function build(index, show, disable, style) {
        index = new UrlBuilder().set("index", index).build();
        if (disable == true) {
            return '<li><a href="javascript:void(0);">' + show + '</a></li>';
        } else if (disable == false) {
            return '<li><a href="' + index + '">' + show + '</a></li>';
        } else {
            return '<li class="' + style + '"><a href="' + index + '">' + show + '</a></li>';
        }
    }

    function sort(propertie, direction) {
        var search = new UrlBuilder().set("propertie", propertie).set("direction", direction).build();
        window.location.href = window.location.href.split("?")[0] + search;
    }


    function UrlBuilder() {
        var params = window.location.search;
        if (params) {
            params = params.replace("?", "");
            params = params.split("&");
        } else {
            params = [];
        }

        this.set = function (key, value) {
            for (var p in params) {
                var entry = params[p].split("=");
                if (entry[0] == key) {
                    params[p] = key + "=" + value;
                    return this;
                }
            }
            params.push(key + "=" + value);
            return this;
        };

        this.build = function () {
            var result = "";
            for (var p in params)
                result += "&" + params[p];

            result = result.replace("&", "?");
            return result;
        };

    }
</script>
</html>
